<script setup lang="ts">
import { ref, reactive } from 'vue';

const emit = defineEmits<{
  (e: 'onSubmit', password: string): void;
}>();

const show = ref(false);
const form = reactive({
  password: '',
});

// 弹窗关闭
const close = () => {
  show.value = false;
  // 重置状态
  form.password = '';
};

// 弹窗提交
const onSubmit = () => {
  emit('onSubmit', form.password);
  close();
};

defineExpose({
  open() {
    show.value = true;
  },
});
</script>
<template>
  <div class="passwordDialog">
    <van-dialog v-model:show="show" @close="close">
      <template #title>
        <div class="text-left pl-5 mb-5">输入支付密码</div>
      </template>
      <div class="flex justify-center px-6">
        <van-field
          class="custom-field !bg-[#F6F6F6] !rounded-md"
          type="password"
          v-model.trim="form.password"
          placeholder="请输入支付密码"
        />
      </div>
      <template #footer>
        <div class="flex justify-end p-5">
          <van-button class="w-[95px] !mr-3" round @click="close">取消</van-button>
          <van-button class="w-[123px]" round type="primary" color="#EC2D69" @click="onSubmit"> 确认 </van-button>
        </div>
      </template>
    </van-dialog>
  </div>
</template>
<style lang="less" scoped></style>
